
<template>
    <div class="tip_container">
        <div class="content">
            <slot></slot>
        </div>
        <div :class="[placement,'tip',effect]">{{content}}</div>
    </div>
</template>

<script>
export default {
	data() {
		return {}
	},
	props: {
		placement: {
			type: String,
			default() {
				return 'top'
			}
		},
		effect: {
			type: String,
			default() {
				return 'light'
			}
		},
		content: {
			type: String,
			default() {
				return ''
			}
		}
	},
	methods: {}
}
</script>

<style scoped>
.tip_container {
	display: inline-block;
	position: relative;
	--padding: 8px;
}
.tip_container > .content {
	display: flex;
	align-items: center;
}
.tip_container > .tip {
	display: none;
}
.tip_container > .content:hover + .tip {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	word-wrap: break-word;
	max-width: 380px;
	font-size: 14px;
	border-radius: 5px;
	padding: 5px 5px;
}

.top {
	position: absolute;
	z-index: 2000;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: var(--padding);
	bottom: 100%;
}
.bottom {
	position: absolute;
	left: 50%;
	z-index: 2000;
	transform: translateX(-50%);
	margin-top: var(--padding);
	top: 100%;
}
.left {
	position: absolute;
	z-index: 2000;
	top: 50%;
	transform: translateY(-50%);
	margin-right: var(--padding);
	right: 100%;
}
.right {
	position: absolute;
	z-index: 2000;
	top: 50%;
	transform: translateY(-50%);
	margin-left: var(--padding);
	left: 100%;
}

.dark {
	background: #353535;
	color: #fff;
	border: 0.5px solid #353535;
}
.light {
	background: #fff;
	color: #000;
	border: 0.5px solid #b9b9b9;
}
</style>
